<template>
    <div>
				<viewer class="imgbox" :images="imgListArr">
						<ul class="qw-imglist">
								<li class="qw-imglist-li"
										v-for="(src,index) in imgListArr"
										:key="index">
										<div v-if="imgListData[index].type==='video'"
												class="qw-videolist-box">
												<video-player v-if="item.playerOptions"
																			class="vjs-custom-skin"
																			ref="videoPlayer"
																			:playsinline="true"
																			:options="item.playerOptions"></video-player>
										</div>
										<div v-else
												class="qw-imglist-box">
												<img :src="src" alt="" style="cursor:pointer">
												<!-- <div v-if="!!imgListData[index].corner"
														class="qw-imglist-corner">{{imgListData[index].corner}}</div> -->
												<!-- <div class="qw-imglist-cover">
														<Icon type="ios-eye-outline"
																	@click.native="handleView(item.url)"></Icon>
												</div> -->
										</div>
								</li>
						</ul>
				</viewer>
        <Modal title="图片预览"
               width="400"
               v-model="visible">
            <img :src="imgUrl"
                 v-if="visible"
                 style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                imgUrl: '',
                visible: false,
                imgListData: [],
                imgListArr: []
            }
        },
        props: {
            imgList: {
                type: Array
            }
        },
        watch: {
            imgList (n, o) {
                this.imgListArr = [];
                n.forEach(item => {
                    this.imgListArr.push(item.url)
                });
            }
        },
        created () {
            this.imgListData = [...this.imgList];
            this.imgListArr = [];
            this.imgList.forEach(item => {
                this.imgListArr.push(item.url)
            });
            this.imgListData.forEach(item => {
                if (item.type === 'video') {
                    let sources = [];
                    sources.push({
                        type: item.vType, // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: item.url // url地址
                    })
                    item.playerOptions = {
                        // playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                        autoplay: false, // 如果true,浏览器准备好时开始回放。
                        muted: false, // 默认情况下将会消除任何音频。
                        loop: false, // 导致视频一结束就重新开始。
                        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                        language: 'zh-CN',
                        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                        sources: sources,
                        poster: 'https://image.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA/thumbnail.jpg?time=11', // 你的封面地址
                        // width: document.documentElement.clientWidth, //播放器宽度
                        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                        controlBar: {
                            timeDivider: false,
                            durationDisplay: false,
                            remainingTimeDisplay: false,
                            fullscreenToggle: true // 全屏按钮
                        }
                    }
                }
            })
        },
        methods: {
            handleView (url) {
                this.imgUrl = url;
                this.visible = true;
            }
        }
    }
</script>
<style lang="less" scoped>
.qw-imglist {
    list-style: none;
    display: flex;
    align-items: flex-start;
    .qw-imglist-li {
        width: 120px;
        height: 120px;
        background: #f5f5f5;
        line-height: 120px;
        text-align: center;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        & ~ .qw-imglist-li {
            margin-left: 16px;
        }
        .qw-imglist-box {
            background: #f5f5f5;
            display: -webkit-box;
            display: -moz-box;
            display: box;
            -webkit-box-align: center;
            -moz-box-align: center;
            box-align: center;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            box-pack: center;
                width: 100%;
                height: 100%;
            img {
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
            }
            .qw-imglist-corner {
                position: absolute;
                right: -22px;
                top: -10px;
                background: #2d8cf0;
                color: #fff;
                font-size: 12px;
                line-height: 24px;
                padding: 14px 20px 0;
                transform: rotate(45deg);
            }
            .qw-imglist-cover {
                display: none;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.6);
                i {
                    color: #fff;
                    font-size: 20px;
                    cursor: pointer;
                    margin: 0 2px;
                }
            }
        }
        &:hover .qw-imglist-cover {
            display: block;
        }
    }
}

.qw-videolist-box {
    & /deep/ .video-player {
        width: 120px;
        height: 120px;
        border-radius: 4px;
        overflow: hidden;
        & .video-js {
            height: 100%;
            .vjs-icon-placeholder {
                width: 100%;
                height: 100%;
                display: block;
            }
            .vjs-volume-panel,
            .vjs-current-time,
            .vjs-progress-control {
                display: none;
            }
        }
        & .vjs-fullscreen {
            .vjs-volume-panel,
            .vjs-current-time,
            .vjs-progress-control {
                display: flex;
            }
        }
    }
    & /deep/ .vjs-custom-skin > .video-js .vjs-big-play-button {
        width: 30px !important;
        height: 30px !important;
        font-size: 20px;
        line-height: 30px !important;
        margin-top: -12px !important;
        margin-left: -16px;
    }
}
</style>
